/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-08-15 13:27:25
 * @LastEditTime : 2023-08-24 08:55:30
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Pages\Front\jtgj\Other\TwoA01.jsx
 * @Description  :
 */
import { CommonSmallTitle } from '../Assets/Common/SmallTitle'
import { Pie, Column } from '@ant-design/plots'
import { AfterList, PieTemplate, complexColumnTemplate } from '../Template'
import { useRef, useState } from 'react'
import { useRequest, useSize } from 'ahooks'
import { Http } from '../../../Common/Api'
import { segmentationString } from '../../../Common/Configure/Common'
import { useEffect } from 'react'
import { FrontModalBox } from '../Assets/Modal'

const ColorOne = ['rgba(143, 237, 125, 1)', 'rgba(243, 89, 91, 1)', 'rgba(119, 151, 191, 1)']
const PerList = { complete: '完成', toBeCompleted: '待完成', unableToComplete: '无法完成' }

export const TwoA01 = () => {
    const ChartTwo = useRef()
    const SizeTwo = useSize(ChartTwo)
    const ChartThr = useRef()
    const SizeThr = useSize(ChartThr)
    const ChartFou = useRef()
    const SizeFou = useSize(ChartFou)

    const { runAsync: getOne } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { toBeCompleted, complete, unableToComplete } = res
            const number = toBeCompleted + complete + unableToComplete
            const per = parseInt((complete / number) * 100) || 0
            setDataPer(Object.keys(res).map(item => ({ type: PerList[item], value: res[item] })))
            setDataOne({ ...res, per })
            setNumber(number)
        },
    })
    const { runAsync: getTwo } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = []
            res.forEach(({ tableName, complete, toBeCompleted, unableToComplete }) => {
                data = [
                    ...data,
                    { type: '完成', label: tableName, value: complete },
                    { type: '待完成', label: tableName, value: toBeCompleted },
                    { type: '无法完成', label: tableName, value: unableToComplete },
                ]
            })
            setDataTwo(data)
        },
    })
    const { runAsync: getThr } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = []
            res.forEach(({ tableName, complete, toBeCompleted, unableToComplete }) => {
                let label = segmentationString(tableName, 6)
                data = [
                    ...data,
                    { type: '总数', label: label.join('\n'), value: complete + toBeCompleted + unableToComplete },
                    { type: '完成', label: label.join('\n'), value: complete },
                    { type: '待完成', label: label.join('\n'), value: toBeCompleted },
                    { type: '无法完成', label: label.join('\n'), value: unableToComplete },
                ]
            })
            setDataThr(data)
        },
    })
    const { runAsync: getFou } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = []
            res.forEach(({ tableName, complete, toBeCompleted }) => {
                let label = segmentationString(tableName, 6)
                data = [
                    ...data,
                    { type: '完成', label: label.join('\n'), value: complete },
                    { type: '未完成', label: label.join('\n'), value: toBeCompleted },
                ]
            })
            setDataFou(data)
        },
    })

    useEffect(() => {
        getOne({ url: 'getJTGJAffairsSupervisionList' })
        getTwo({ url: 'getJTGJAffairsSupervisionByTypeList' })
        getThr({ url: 'getJTGJAffairsSupervisionByOrgList' })
        getFou({ url: 'getJTGJAffairsSupervisionByDateList' })
    }, [getOne, getTwo, getThr, getFou])

    const ListOne = [
        { uuid: 1, label: '完成', value: 'complete', unit: '件', color: 'rgba(143, 237, 125, 1)' },
        { uuid: 2, label: '待完成', value: 'toBeCompleted', unit: '件', color: 'rgba(119, 151, 191, 1)' },
        { uuid: 3, label: '无法完成', value: 'unableToComplete', unit: '件', color: 'rgba(243, 89, 91, 1)' },
        { uuid: 4, label: '完成比', value: 'per', unit: '%', color: 'rgba(255, 147, 147, 1)' },
    ]
    const [Number, setNumber] = useState(0)

    const [DataOne, setDataOne] = useState()
    const [DataPer, setDataPer] = useState([])

    const [DataTwo, setDataTwo] = useState([])
    const [DataThr, setDataThr] = useState([])
    const [DataFou, setDataFou] = useState([])

    const [OptionsCall, setOptionsCall] = useState()

    const onA01 = () => {
        setOptionsCall({
            type: 'TableList',
            data: { title: '督办事务概况', type: 'AffairsSupervisionDetailTables' },
        })
    }

    return (
        <>
            <div className="left">
                <CommonSmallTitle title="督办概况" flex={325} style={{ marginBottom: 16 }}>
                    <div className="one">
                        <div onClick={onA01}> 总数 : {Number} 件 </div>
                        <div>
                            <Pie
                                {...PieTemplate({
                                    data: DataPer,
                                    color: ColorOne,
                                    size: 160,
                                })}
                            />
                            <AfterList
                                list={ListOne}
                                data={DataOne}
                                style={{
                                    '--DivWidth': '100%',
                                    '--FirstSize': '26px',
                                    '--LastSize': '24px',
                                    '--AfterHight': '10px',
                                    '--AfterBtm': '4px',
                                }}
                            />
                        </div>
                    </div>
                </CommonSmallTitle>
                <CommonSmallTitle title="按事件分类统计" flex={565}>
                    <div className="two" ref={ChartTwo}>
                        {SizeTwo && (
                            <Column
                                {...complexColumnTemplate({
                                    size: SizeTwo,
                                    data: DataTwo,
                                    color: ['rgba(0, 201, 209, 1)', 'rgba(233, 147, 255, 1)', 'rgba(121, 121, 121, 1)'],
                                })}
                            />
                        )}
                    </div>
                </CommonSmallTitle>
            </div>
            <div className="right">
                <CommonSmallTitle title="按部门和分公司类别展示" flex={1} style={{ marginBottom: 16 }}>
                    <div className="thr" ref={ChartThr}>
                        {SizeThr && (
                            <Column
                                {...complexColumnTemplate({
                                    size: SizeThr,
                                    data: DataThr,
                                    color: [
                                        'rgba(135, 213, 255, 1)',
                                        'rgba(0, 201, 209, 1)',
                                        'rgba(233, 147, 255, 1)',
                                        'rgba(121, 121, 121, 1)',
                                    ],
                                    isGroup: true,
                                })}
                            />
                        )}
                    </div>
                </CommonSmallTitle>
                <CommonSmallTitle title="超时统计" flex={1}>
                    <div className="fou" ref={ChartFou}>
                        {SizeFou && (
                            <Column
                                {...complexColumnTemplate({
                                    size: SizeFou,
                                    data: DataFou,
                                    color: ['rgba(0, 201, 209, 1)', 'rgba(121, 121, 121, 1)'],
                                    isGroup: true,
                                })}
                            />
                        )}
                    </div>
                </CommonSmallTitle>
            </div>
            <FrontModalBox OptionsCall={OptionsCall} />
        </>
    )
}
